.door-box {
  --doorColor: #cdcdcd;
  width: 22px;
  height: 30px;
  border: 1px solid var(--doorColor);
  background-color: #fff;
  .door {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--doorColor);
    transition: transform 1s;
    transform-style: preserve-3d;
    transform-origin: 100%;
    background-color: #fff;
    &::before {
      content: '';
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateY(-50%);
      height: 3px;
      width: 3px;
      border: 1px solid var(--doorColor);
      border-radius: 50%;
      background-color: #fff;
    }
    .door-handle {
      position: absolute;
      left: 3px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 2px;
      border: 1px solid var(--doorColor);
      border-radius: 50%;
      background-color: var(--doorColor);
      &::after {
        content: '';
        position: absolute;
        top: 10%;
        left: 100%;
        height: 80%;
        width: 6px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background-color: var(--doorColor);
        transform-origin: 0 0;
        transition: transform 1s;
      }
    }
  }
  .door-open {
    transform: rotateY(30deg) skewY(-0.3rad);
    .door-handle {
      &::after {
        transform: rotateZ(50deg);
      }
    }
  }
}
